<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌曲详细列表</title>
    
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css">
    <!-- 引入Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet">

    <link rel="stylesheet" href="player.css">

</head>
<body>
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <!-- 导航栏 -->
            <ul class="nav navbar-nav">
                <li class="active"><a href="/dev/view/index.html">首页</a></li>
                <li><a href="/dev/view/topChart/rank.html">排行榜</a></li>
                <li><a href="/dev/view/playList/playlist.html">歌单</a></li>
            </ul>
            
            <!-- 登录按钮 -->
            <ul class="nav navbar-nav navbar-right" id="loginButton">
                <li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
                <!-- 初始隐藏头像 -->
                <li><img id="nav_img" src="../../img/1.png" style="display: none;"></li>
            </ul>

            <!-- 搜索框 -->
            <form class="navbar-form navbar-right" id="searchForm">
                <div class="form-group">
                    <input type="text" class="form-control" id="searchInput" placeholder="搜索音乐">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>

        </div>
    </div>

    <!-- 模态框（Modal）-begin -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">用户登录入口
                        
                    </h4>
                </div>
                <div class="modal-body">
                    <!-- 登录表单   -begin -->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="firstname" placeholder="请输入邮箱">
                        </div>
                        <div class="col-md-2" style="margin-left: -20px;">
                            <button type="button" class="btn btn-success">发送验证码</button>
                        </div>
                        </div>
                        <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">验证码</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="lastname" placeholder="请输入验证码">
                        </div>
                        </div>
                        <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                            <label>
                                <input type="checkbox">请记住我
                            </label>
                            </div>
                        </div>
                        </div>
                        <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" class="btn btn-default">登录</button>
                        </div>
                        </div>
                    </form>
                    <!-- 登录表单 -end -->
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 模态框（Modal）- end -->
</nav>

    <!-- 自定义容器 -->
    <div class="custom-container">
        <div class="container mt-4">
            <!-- 歌单头部信息 -->
            <div class="playlist-header">
                <!-- 图片部分 -->
                <img id="playlist-cover" src="https://placehold.co/300x300" alt="歌单封面" class="playlist-cover">
                <!-- 右侧内容部分 -->
                <div class="playlist-info">
                    <!-- 歌单标题 -->
                    <h1 id="playlist-title" class="playlist-title">我的歌曲</h1>
                    <!-- 创建者信息 -->
                    <div class="playlist-creator">
                        <i class="bi bi-person-fill"></i> 歌手：<span id="playlist-creator" style="color: #007bff;">用户123</span>
                    </div>
                    <!-- 按钮组 -->
                    <div class="button-group">
                        <!-- 播放按钮 -->
                        <button type="button" class="btn btn-primary" onclick="document.getElementById('audioPlayer').play()">
                            <i class="bi bi-play-fill"></i> 播放
                        </button>
                        <!-- 收藏按钮 -->
                        <button type="button" class="btn btn-outline-secondary">
                            <i class="bi bi-heart"></i> 收藏
                        </button>
                        <!-- 分享按钮 -->
                        <button type="button" class="btn btn-outline-secondary">
                            <i class="bi bi-share"></i> 分享
                        </button>
                        <!-- 下载按钮 -->
                        <button type="button" class="btn btn-outline-secondary">
                            <i class="bi bi-download"></i> 下载
                        </button>
                        <!-- 评论按钮 -->
                        <button type="button" class="btn btn-outline-secondary">
                            <i class="bi bi-chat-left-text"></i> 评论
                        </button>
                    </div>
                    <!-- 歌单描述 -->
                    <div id="playlist-description" class="playlist-description">
                        这里是歌单！
                    </div>
                </div>
            </div>
        </div>

        <!-- 播放器 -->
        <div class="player-container">
            <div class="player">
                <audio id="audioPlayer" controls>
                    <!-- 修改后（保持id不变） -->
                    <source id="audioPlayerSc" type="audio/mpeg">
                </audio>
                <div class="player-controls">
                    <button onclick="document.getElementById('audioPlayer').play()">
                        <i class="bi bi-play-fill"></i>
                    </button>
                    <button onclick="document.getElementById('audioPlayer').pause()">
                        <i class="bi bi-pause-fill"></i>
                    </button>
                    <button onclick="document.getElementById('audioPlayer').volume += 0.1">
                        <i class="bi bi-volume-up"></i>
                    </button>
                    <button onclick="document.getElementById('audioPlayer').volume -= 0.1">
                        <i class="bi bi-volume-down"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="search.js"> </script>
    <!-- 引入jQuery和Bootstrap JS -->
    <script src="/dev/plugins/jquery/jquery.min.js"></script>
    <script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>

    <script>
        $(document).ready(function() {
            // 解析URL参数
            const getUrlParam = name => {
                const params = new URLSearchParams(window.location.search);

                return params.get(name);
            };

            const songId = getUrlParam('songId');
            console.log("songId："+songId)
            if (!songId) {
                alert('无效的歌曲ID');
                return;
            }

            // 获取歌曲详情
            $.ajax({
                url: `/dev/song/${songId}`,
                method: 'GET',
                dataType: 'json',
                success: function(res) {
                    console.log("响应数据:", res);  // 使用逗号而不是加号
                    console.log("响应状态码:", res.code);
                    console.log("歌曲数据:", res.data);
                    if (res.code === "200") {
                        const song = res.data;
                        // 更新页面内容
                        $('#playlist-title').text(song.title);

                        $('#playlist-creator').text(song.artist);

                        $('#playlist-description').text(song.iyrics);

                        $('#playlist-cover').attr('src', '/dev/img/'+song.proImg);

                        // 更新页面标题
                        document.title = `${song.title} - 歌曲详情`;

                        //修改播放器路径
                        // 获取音频元素
                        const audioPlayer = document.getElementById('audioPlayer');
                        const sourceElement = document.getElementById('audioPlayerSc');

                        // 设置新的音频源（假设song.filePath返回文件名如"song1.mp3"）
                        sourceElement.src = `/dev/music/${song.filePath}`;

                        // 重新加载音频（必须调用）
                        audioPlayer.load();

                    } else {
                        alert('获取歌曲信息失败: ' + res.msg);
                    }
                },
                error: function(xhr) {
                    alert('请求失败: ' + xhr.status);
                }
            });

            // 时长格式化函数
            function formatDuration(seconds) {
                const mins = Math.floor(seconds / 60);
                const secs = seconds % 60;
                return `${mins}分${secs.toString().padStart(2, '0')}秒`;
            }
        });
        function updateSongInfo(song) {
            // 更新封面图片
            $("#playlist-cover").attr("src", `/dev/img/${song.proImg}`);

            // 更新标题
            $("#playlist-title").text(song.title);

            // 更新歌手信息
            $("#playlist-creator").text(`歌手：${song.artist}`);

            // 格式化并更新歌词（假设字段是 lyrics）
            const formattedLyrics = song.iyrics.replace(/\n/g, '<br>');
            $("#playlist-description").html(formattedLyrics);

            // 更新音频播放源
            const audioPlayer = document.getElementById("audioPlayer");
            audioPlayer.src = `/dev/music/${song.filePath}`;

            // 如果需要自动播放
            // audioPlayer.play();
        }

    </script>
</body>
</html>